<template>
  <view class="container" style="padding-bottom: 90px">
    <!--  tab 栏 -->
    <view class="wh100">
      <li-empty v-if="pageList == null || pageList.length == 0" :text="`${subject}为空~~`" />
      <view v-else class="items-container" style="padding-bottom: 90px">
        <view @click="onItemClick(item)" class="items" :id="`menu-${item.id}`" v-for="(item, index) in pageList" :key="item.id">
          <text class="item-title">{{ item[itemName] }}</text>
          <!--           <text>{{
            couponTypeEnum.find((itm) => itm.id == item["typeId"]).text
          }}</text> -->
          <view></view>
          <text style="color: #f56c6c; font-weight: bold; font-size: 26rpx" v-if="item.status != 3" v-on:click.stop="onStopCouponClick($event, item)">停用</text>
        </view>
        <li-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" @loadmore="onReachBottomEvent" />
      </view>
    </view>
    <!-- <view class="bottom-add" @click="btnAddClick"> 新建{{ subject }} </view> -->
    <view class="btn-bottom-group">
      <view class="btn" v-on:click="onBtnClick(2)">批量新增礼券发放</view>
      <view class="btn" v-on:click="onBtnClick(1)">新增礼券发放</view>
    </view>
  </view>
</template>

<script>
import { uShowLoading, uHideLoading, uNavigateTo, uSetNavigationBarTitle, uSwitchTab, utoast, umodal } from '../../../utils/uniUtils.js';
import { GetFoodCouponUserList, FoodCouponUserDoStop } from '../../../common/modules/catering.js';
import { storeId } from '../../../constants/apiConstants';
import { couponTypeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';

export default {
  data() {
    return {
      couponTypeEnum,
      itemName: 'couponName', // pageList 每一项的标题
      subject: '礼券发放', // 主题
      activeStyle: {
        color: '#F3C45D'
      },
      tabMenusIdx: 0, // tab的下标
      tabMenus: null, // 上tab
      leftMenus: null, // 左tab
      leftMenusIdx: null, // 左tab
      pageList: [], // 内容列表
      rootRoute: 'workbench',
      routeName: 'couponGrant',
      isLoaded: false, //  控制页面是否显示
      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadStatus: 'loadmore',
      loadingText: '努力加载中。。。',
      loadmoreText: '上拉加载更多~~',
      nomoreText: '实在没有了'
    };
  },
  onReachBottom() {
    this.onReachBottomEvent();
  },
  async mounted() {
    uSetNavigationBarTitle(this.subject);
    try {
      uShowLoading();
      await this.GetPageList();
    } catch (error) {
      console.log('err', error);
      utoast('页面初始化失败！', 'error');
      setTimeout(() => {
        uSwitchTab('/pages/tabBar/staging');
      }, 800);
    } finally {
      uHideLoading();
      this.isLoaded = true;
    }
  },
  methods: {
    onReachBottomEvent() {
      console.log('onReachBottom');
      if (this.pageList.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          await this.GetPageList();
          uHideLoading();
        }, 300);
      } else {
        return;
      }
    },
    async onTabClick(e) {
      this.tabMenusIdx = e.index;
      await this.GetPageList(e.index);
    },

    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      //   if (this.tabMenus[idx] != null) {
      if (this.showLoadMore) {
        this.pageNum += 1;
      }
      this.loadStatus = 'loading';

      let {
        data: { list, total }
      } = await GetFoodCouponUserList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        storeId: storeId
      });

      this.pageList = [...this.pageList, ...list];
      this.total = total;
      if (this.pageList.length == this.total) {
        this.loadStatus = 'nomore';
      } else {
        this.loadStatus = 'loadmore';
      }
      this.showLoadMore = false;
      // console.log("tagList", list);
      //   }
    },
    async btnAddClick() {
      uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=add `);
    },

    onItemClick(item) {
      uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=edit&id=` + item.id);
    },

    onStopCouponClick: async function (e, item) {
      e.stopPropagation();
      if (!(await umodal('确定要停用吗？'))) return;
      const res = await FoodCouponUserDoStop(item.id);
      if (res?.code == 0) {
        utoast('停用成功！', toastIconEnum.success);
        this.pageList = [];
        this.pageNum = 1;
        this.GetPageList();
      }
    },
    onBtnClick: function (a) {
      uNavigateTo(`/pages/${this.rootRoute}/${this.routeName}/doAdd?mode=add&id=` + a);
    }

    /*  method put on the top */
  }
};
</script>

<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';

.container {
  height: 100.1vh;

  .details {
    background-color: #fff;
  }
  .btn-bottom-group {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .btn {
      flex: 1;
      height: 49px;
      margin-right: 15px;
      margin-left: 15px;
      border-radius: 10px;
      background-color: #f3c45d;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18;
      font-weight: bold;
    }
  }
}
</style>
